<!--
 * @Description:评论卡片
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-17 17:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-07-04 17:54:46
-->
<template>
	<view class="reviews-card">
		<image @click="goToUserInfo(data.userId)" style="width: 78rpx;height: 78rpx;border-radius: 50%;" :src="$u.file.getMedieUrl(data.userAvatar)" mode="aspectFill"></image>
		<view class="main">
			<view class="name-start">
				<view class="name">
					<p> {{data.userName}}</p>
					<p>
						{{publicJS.timeZoneSwitching(Number(data.createdTime))}}
					</p>
					
				</view>
				<view class="start">
					<u-rate :current="data.productScore" :disabled="true" active-color="#FDA116"></u-rate>
					
				</view>
			</view>
			<view class="content">
				{{data.content}}
			</view>
			<view class="image-list" v-if="data.images.length">

				<imageForSize style="background-color: #ECECEC; border-radius: 26rpx;" :src="$u.file.getMedieUrl(item)" size="146"
					radius="24" v-for="(item,index) in data.images.split(',')" :key="index" @click=" largen(item)"></imageForSize>
			</view>
			<view class="youyong-box" >
				<view class="" style="display: flex;border-radius: 40rpx;border: 1px solid #ccc;padding: 10rpx 15rpx;" @click="handleUsed">
					<u-icon name="thumb-up" color="#ccc" size="20"></u-icon>
					<text style="font-size: 16rpx;color:#ccc;margin-left: 5rpx;">{{`有用(${data.likeNum})`}}</text>					
				</view>
			</view>
		</view>
			
	</view>
</template>

<script>
	// import imageForSizeReview from '../components/imageForSizeReview/imageForSizeReview.vue'
	export default {
		
		props: {
			data: {
				default: () => ({}),
				type: Object
			},
			imgList: {
				default: () => [],
				type: Array
			},
			
		},
		data() {
			return {
				
			}
		},

		methods:{
			handleUsed(){
				this.$u.post('/app/shopOrderComment/likeComment/' + this.data.id).then((res) => {
					console.log(11111,res);
					this.data.likeNum++
				});
			},
			largen(url){
			
				// this.$emit('largen',url)
				uni.previewImage({
				   urls: [this.$u.file.getMedieUrl(url)] // 需要预览的图片链接列表
				   });
			},
			goToUserInfo(id){
				uni.navigateTo({
					url:'/pages/user/components/userInfo?userId='+id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.reviews-card {
		display: flex;

		.main {
			flex: auto;
			width: 0;
			margin-left: 30rpx;

			.name-start {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.name {
					>p {
						&:nth-child(1) {
							font-size: 28rpx;
							color: #1B1D29;
						}

						&:nth-child(2) {
							font-size: 22rpx;
							color: #91909A;
						}
					}
				}

				.start {
					display: flex;
					align-items: center;

					.u-icon {
						color: #F26163;
					}
				}
			}

			.content {
				margin-top: 22rpx;
				font-size: 22rpx;
				color: #1B1D29;
				padding-bottom: 28rpx;
				line-height: 32rpx;
			}

			.image-list {
				display: flex;
				flex-wrap: wrap;
				>view{
					margin-bottom: 24rpx;
				}
				>view:not(:first-child):not(:nth-child(3n+1)) {
					margin-left: 14rpx;
				}
			}
		}
	}
	.youyong-box{
		display: flex;
		align-items: center;
		justify-content: end;
		margin-bottom: 20rpx;
	}
</style>
